<template>
  <img :src="imgUrl" v-if="imgUrl" alt="" />
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { DowloadPreviewImage } from "@/utils/index";
import defaultImg from '@/assets/imgs/icon-hom3/default_org.png'
const props = defineProps<{
  src?: string;
}>();
const imgUrl = ref("");
const imgArr = props.src?.split(",") || [];

const getPreviewImage = async () => {
  if (props.src?.includes("ningxiang")) {
    const previewUrl = (await DowloadPreviewImage(imgArr[0])) as string;
    imgUrl.value = previewUrl;
  } else {
    imgUrl.value = imgArr[0]||defaultImg
  }
};

watch(
  () => props.src,
  () => {
    getPreviewImage();
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.preview-img-box {
  width: 128px;
  height: 128px;
  .el-image {
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
